@font-face {
  font-family: Manrope;
  src: url(Manrope-VariableFont_wght.ttf) format("truetype")
}

body {
  margin: 0;
  line-height: normal;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  font-family: Manrope;
}

:root {
  /* fonts */
  --font-manrope: Manrope;
  --font-poppins: Poppins;

  /* font sizes */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-5xl: 24px;
  --font-size-sm: 14px;

  /* Colors */
  --color-white: #fff;
  --color-darkslateblue-100: #164293;
  --color-darkslateblue-200: rgba(22, 66, 147, 0.1);
  --color-gray-100: #7d8389;
  --color-gray-200: rgba(125, 131, 137, 0.5);
  --color-gray-300: rgba(0, 0, 0, 0.7);
  --color-gainsboro-100: #e0e2e5;
  --color-gainsboro-200: rgba(224, 226, 229, 0.2);
  --color-gainsboro-300: rgba(224, 226, 229, 0.5);
  --color-seagreen-100: #00884a;
  --color-seagreen-200: rgba(0, 136, 74, 0.1);
  --color-purple-100: #89037a;
  --color-purple-200: rgba(137, 3, 122, 0.1);
  --color-black: #000;
  --color-lightblue: #b3ccdb;

  /* Gaps */
  --gap-5xs: 8px;
  --gap-12xs: 1px;
  --gap-7xs: 6px;
  --gap-4xs: 9px;
  --gap-xs: 12px;
  --gap-5xl: 24px;
  --gap-29xl: 48px;

  /* Paddings */
  --padding-smi: 13px;
  --padding-5xl: 24px;

  /* border radiuses */
  --br-3xs: 10px;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), linear-gradient(180deg, #5E3974 0%, #2C487D 100%);
  /*设置滚动条颜色*/
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.3);
}

.wrapper {
  position: relative;
  background: linear-gradient(-90deg, #89037a, #164293);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0px 65px;
  box-sizing: border-box;
}

.header .logo-icon1 {
  width: 100px;
  height: 25.42px;
  object-fit: cover;
}

.header .sdvos-demo1 {
  font-size: 24px;
  color: #B3CCDB;
  mix-blend-mode: hard-light;
}

.main {
  background: rgba(255, 255, 255, 0.95);
  height: calc(100vh - 64px);
}

.main .main-conent {
  display: flex;
  justify-content: space-between;
}

.header-action {
  padding: 0px 65px;
  box-sizing: border-box;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E0E2E5;
}

.header-action .vehicle-signal-specification1 {
  font-size: var(--font-size-5xl);
  line-height: 32px;
  font-weight: 800;
  color: var(--color-black);
  display: inline-block;
  width: 582px;
}

.header-action .demo-action-list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.header-action .demo-action-list .demo-pop-up-item {
  border: 1px solid #005587;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 0;
  box-sizing: border-box;
  margin-left: 8px;
  text-align: center;
  width: 120px;
  cursor: pointer;
  transition: background 0.4s ease;
}

.header-action .demo-action-list .demo-pop-up-item.active {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), #005587;
}

.header-action .demo-action-list .demo-pop-up-item.active .text {
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-action .demo-action-list .demo-pop-up-item:hover {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), #005587;
  transition: background 0.4s ease;
}

.header-action .demo-action-list .demo-pop-up-item:hover .text {
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-action .demo-action-list .demo-pop-up-item img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.header-action .demo-action-list .demo-pop-up-item .text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 32px;
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), #005587;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left-box {
  padding: 18px 31px 18px 66px;
  box-sizing: border-box;
  width: 50%;
  border-right: 1px solid #E0E2E5;
}

.left-box .search {
  width: 100%;
  height: 42px;
  font-size: var(--font-size-base);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: rgba(224, 226, 229, 0.5);
  border-radius: 10px;
  padding: 19px 36px;
  box-sizing: border-box;
  margin-bottom: 19px;
}

.left-box .search img {
  width: 18px;
}

.left-box .search input {
  width: 442px;
  height: 42px;
  font-family: Manrope;
  text-align: left;
  font-size: 16px;
  letter-spacing: 0;
  border: 0;
  outline: medium;
  background: none;
  padding-left: 22px;
}

.left-box .vss-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 370px;
  overflow-y: auto;
  margin-bottom: 23px;
}

.left-box .vss-list .vss-item {
  width: calc(50% - 8px);
  margin-right: 2px;
  margin-bottom: 2px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  position: relative;
  cursor: pointer;
  /* 奇数行*/
  transition: border-image, background ease 0.2s;
}

.left-box .vss-list .vss-item.active {
  /* border-color: #5D3A75; */
  border: 2px solid;
  border-image: linear-gradient(to right, #89037a, #164293) 1;
  background: linear-gradient(247.8deg, rgba(93, 58, 117, 0.05) 18.91%, rgba(48, 70, 125, 0.05) 64.49%);
}

.left-box .vss-list .vss-item.active .desc {
  background: linear-gradient(-90deg, #89037a, #164293);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left-box .vss-list .vss-item.active .title {
  background: linear-gradient(-90deg, #89037a, #164293);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .left-box .vss-list .vss-item:nth-child(odd) {
  border-right-color: #E0E2E5;
  border-bottom-color: #E0E2E5;
}
.left-box .vss-list .vss-item:nth-child(even) {
  border-bottom-color: #E0E2E5;
} */
.left-box .vss-list .vss-item:hover {
  border-image: linear-gradient(to right, #89037a, #164293) 1;

  transition: border-color, background ease 0.2s;
  background: linear-gradient(247.8deg, rgba(93, 58, 117, 0.05) 18.91%, rgba(48, 70, 125, 0.05) 64.49%);
}

.left-box .vss-list .vss-item:hover .title {
  background: linear-gradient(-90deg, #89037a, #164293);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left-box .vss-list .vss-item:hover .desc {
  background: linear-gradient(-90deg, #89037a, #164293);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left-box .vss-list .vss-item .tag {
  position: absolute;
  width: 99px;
  height: 29px;
  right: 15px;
  top: 15px;
  border-radius: 0px;
  text-align: center;
  background: rgba(22, 66, 147, 0.1);

  line-height: 29px;
}

.left-box .vss-list .vss-item .tag.branch {
  background: rgba(22, 66, 147, 0.1);
  color: #164293;
}

.left-box .vss-list .vss-item .tag.sensor {
  background: rgba(137, 3, 122, 0.1);
  color: #89037A;
}

.left-box .vss-list .vss-item .tag.actuator {
  background: rgba(0, 136, 74, 0.1);
  color: #00884A;
}

.left-box .vss-list .vss-item img {
  margin-bottom: 16px;
  width: 54px;
  height: 60px;
}

.left-box .vss-list .vss-item .title {
  position: relative;
  font-weight: 800;
  background: #7D8389;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 32px;
}

.left-box .vss-list .vss-item .desc {
  position: relative;
  font-size: var(--font-size-base);
  margin-top: -5px;
  line-height: 32px;
  color: #7D8389;
}

.left-box .overview .title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
  color: #7D8389;
  margin-bottom: 18px;
}

.left-box .overview .content {
  display: flex;
  justify-content: space-between;
  height: 300px;
  box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.04);
  padding: 14px;
  box-sizing: border-box;
  background: #fff;
}

.left-box .overview .content .left-content {
  flex: 1;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  color: #7D8389;
}

.left-box .overview .content .right-content {
  /* overflow-y: auto; */
  flex: 1;
}

.right-box {
  padding: 18px 12px 18px 32px;
  box-sizing: border-box;
  width: calc(50% - 1px);
}

.right-box .steps {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 12px;
}

.right-box .steps .step {
  display: flex;
  align-items: center;
  position: relative;
  width: 25%;
}

.right-box .steps .step.deploy {
  width: 80px;
}

.right-box .steps .step .step-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.right-box .steps .step .step-content.active .title {
  background: linear-gradient(250.71deg, #164293 0%, #1C6894 0.02%, #164293 156.39%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.right-box .steps .step .step-content.active .time {
  color: #164293;
}

.right-box .steps .step img {
  width: 40px;
  height: 40px;
}

.right-box .steps .step .title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  background: #7D8389;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 18px;
  margin-bottom: 5px;
}

.right-box .steps .step .time {
  color: #7D8389;
  font-size: 14px;
}

.right-box .steps .step .process.line-active {
  background: linear-gradient(270deg, #35308c, #1f3c90);

}

.right-box .steps .step .process {
  position: absolute;
  top: 22px;
  left: 56px;
  background: #E0E2E5;
  width: 190px;
  height: 5px;
}

.right-box .coding {
  margin-bottom: 12px;
}

.right-box .coding .title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
  color: #7D8389;
  margin-bottom: 12px;
}

.right-box .coding .content {
  background: #FFFFFF;
  box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.04);
  width: 100%;
  height: 300px;
}

.right-box .terminal {
  margin-bottom: 12px;
}

.right-box .terminal .title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
  color: #7D8389;
  margin-bottom: 12px;
}

.right-box .terminal .content {
  background: #FFFFFF;
  box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.04);
  width: 100%;
  height: 150px;
}

.right-box .sample {
  background: linear-gradient(-90deg, rgba(137, 3, 122, 0.15), rgba(22, 66, 147, 0.15));
  padding: 8px 14px;
  box-sizing: border-box;
  width: 100%;
}

.right-box .sample .title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  color: #164293;
  margin-bottom: 18px;
}

.right-box .sample .sample-list {
  overflow-x: auto;
  display: flex;
  justify-content: flex-start;
}

.right-box .sample .sample-list .sample-item {
  margin-right: 24px;
  border: 2px solid transparent;
  /* padding: 16px 12px; */
  width: 152px;
  height: 84px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #fff;
  transition: background, border-image 0.2s ease;
  position: relative;
}

.mask {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.mask img {
  width: 40px;
  height: 40px;
  vertical-align: middle;

}

.right-box .sample .sample-list .sample-item:hover {
  border-image: linear-gradient(to right, #89037a, #164293) 1;
  transition: border-image 0.2s ease;
}

.right-box .sample .sample-list .sample-item:hover .img-box {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), linear-gradient(218.83deg, #623874 22.3%, #2C487D 107.37%);
  transition: background 0.2s ease;
}

.right-box .sample .sample-list .sample-item:hover .sample-item-content .content-title {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), linear-gradient(251.79deg, #5F3874 28.78%, #2C487D 62.38%), #7D8389;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: background 0.2s ease;
}

.right-box .sample .sample-list .sample-item:hover .sample-item-content .content-desc {
  color: #164293;
  transition: color 0.2s ease;
}


.right-box .sample .sample-list .sample-item.active {
  border-image: linear-gradient(to right, #89037a, #164293) 1;
}

.right-box .sample .sample-list .sample-item.active .img-box {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), linear-gradient(218.83deg, #623874 22.3%, #2C487D 107.37%);
}

.right-box .sample .sample-list .sample-item.active .sample-item-content .content-title {
  background: linear-gradient(270deg, #89037A -2.71%, #164293 100%), linear-gradient(251.79deg, #5F3874 28.78%, #2C487D 62.38%), #7D8389;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.right-box .sample .sample-list .sample-item.active .sample-item-content .content-desc {
  color: #164293;
}

.right-box .sample .sample-list .sample-item .img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(224, 226, 229, 0.5);
  margin-right: 8px;
}

.right-box .sample .sample-list .sample-item .img-box img {
  width: 26px;
  height: 26px;
}

.right-box .sample .sample-list .sample-item .sample-item-content .content-title {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
  display: flex;
  align-items: center;
  background: #7D8389;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.right-box .sample .sample-list .sample-item .sample-item-content .content-desc {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  display: flex;
  align-items: center;
  color: #7D8389;
}



.loadingbg {
  width: 200px;
  height: 200px;
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: none;
}
.loading {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 1.5s linear infinite;
  position: absolute;
  left: 21%;
  top: 21%;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.circle {
   /* 注：使用 document.querySelector('.circle').getTotalLength() 可以得到圆一圈大小约为345 */
  stroke-dasharray: 345;
  stroke-dashoffset: 172;
}

.CodeMirror {
  font-family: monospace;
  font-size: 25px;
  }
